<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/teacher/notices'}">教师</el-breadcrumb-item>
      <el-breadcrumb-item>过程文档评审</el-breadcrumb-item>
      <el-breadcrumb-item>开题报告评审</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card>
      <el-table :data="reportList" stripe>
        <el-table-column align="center" label="序号" type="index"></el-table-column>
        <el-table-column align="center" label="课题名称" prop="subject.name"></el-table-column>
        <el-table-column align="center" label="课题类型" width="100">
          <template slot-scope="scope"> 
            <el-tag type="info">{{scope.row.subject.type.label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="课题来源" width="100">
          <template slot-scope="scope"> 
            <el-tag>{{scope.row.subject.source.label}}</el-tag>
          </template>
        </el-table-column> 
        <el-table-column align="center" label="选题学生"  width="160">
          <template slot-scope="scope">
            <span>{{scope.row.student.name}} ({{scope.row.student.id}})</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="当前状态" width="100">
          <template slot-scope="scope">
            <el-tag effect="dark" :type="statusObj[scope.row.report.status].type">{{statusObj[scope.row.report.status].label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="查看/审核//撤销">
          <template slot-scope="scope">
            <el-button circle type="warning" :disabled="scope.row.report.status === 1" icon="el-icon-check"
                       @click="reviewReport(scope.row.report.id)" v-if="scope.row.report.status < 3">
            </el-button> 
            <el-button circle icon="el-icon-view" type="primary" @click="reviewReport(scope.row.report.id)" v-else></el-button>
             <el-popover placement="top" width="250px" trigger="click" :content="scope.row.report.reviewAdvice" style="margin-left:20px" v-if="scope.row.report.status > 2">
              <el-button slot="reference" type="success" circle icon="el-icon-check"></el-button>
            </el-popover> 
            <el-button style="margin-left:20px" circle icon="el-icon-delete" type="danger" @click="cancelCheckedReport(scope.row.report.id)" v-if="scope.row.report.status > 2"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 底部分页按钮 -->
      <el-pagination
        background style="margin-left:42%"
        :current-page.sync="pageParam.currentPage" 
        :page-size.sync="pageParam.pageSize"
        @current-change="nowPage"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
  </div>
</template>

<script>
  import {teacherGetReportByPage, teacherGetReportTotal, teacherCancelCheckReportById} from '../../axios/report' 
  export default {
    name: 'TeacherReportList',
    data(){
      return {
        pageParam:{currentPage: 1, pageSize: 5 },// 页码参数 
        total: 1,
        reportList: [],
        statusObj: {
          1: { type: 'info', label: '未填写' },
          2: { type: 'warning', label: '待审核' },
          3: { type: 'danger', label: '未通过' },
          4: { type: 'success', label: '已通过' }
        }
      }
    },
    created(){
      this.getReportList()
      this.getReportTotal()
    },
    methods:{
      // 页码改变时，及时更新数据
      nowPage(page){
        this.pageParam.currentPage = page // 更新当前指向的页码
        this.getReportList()  
      },
      getReportTotal(){
        teacherGetReportTotal().then(res => {
          if(res.success){
            this.total = res.data
          }
        })
      },
      cancelCheckedReport(id){
        this.$confirm('确认撤销审核吗?', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( () => {
          // 此时发送后端请求，保存审核信息
          teacherCancelCheckReportById(id).then(res => {
            if(res.success){
              this.$message.success('撤销成功')
              this.$router.go(0) // 刷新此页面
            }
          })
        }).catch(() => {
          this.$message.info('已取消提交!')
        }) 
      },
      getReportList(){ 
        //  发送后端请求
        teacherGetReportByPage(this.pageParam).then(res => {
          if(res.success) {
            this.reportList = res.data 
          } 
        }) 
      },
      reviewReport (id) {
        this.$router.push({ path: `/teacher/open-report/review/${id}` })
      }, 
    }
  }
</script>

<style scoped>

</style>